<!doctype html>
<html lang="en" data-framework="elm">
<head>
	<meta charset="utf-8">
	<title>Elm • TodoMVC</title>
	<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
	<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
	<style>
		body {
			width: auto;
		}
		.todomvc-wrapper {
			visibility: visible !important;
		}
	</style>
</head>

<body>
<script src="elm.js"></script>
<script>
	(function () {
		var result = localStorage.getItem('elm-todo-model');
		var savedModel = result ? JSON.parse(result) : null;

		var todomvc = Elm.fullscreen(Elm.Todo, {
			savedModel: savedModel,
			route: getRoute()
		});

		todomvc.ports.save.subscribe(function (model) {
			localStorage.setItem('elm-todo-model', JSON.stringify(model));
		});

		// Routing
		window.addEventListener('popstate', function () {
			todomvc.ports.route.send(getRoute());
		}, false);

		function getRoute() {
			var hash = location.href.split('#')[1] || '';
			var route = hash.replace('/', '');
			if (['all', 'active', 'completed'].indexOf(route) >= 0) {
				return route[0].toUpperCase() + route.substr(1);
			}
			return 'All';
		}

		// Setting focus manually
		todomvc.ports.focus.subscribe(function (id) {
			setTimeout(function () {
				if (id === null) {
					return;
				}
				var node = document.getElementById('todo-' + id);
				if (document.activeElement !== node) {
					node.focus();
				}
			}, 50);
		});
	}());
</script>
<script async src="node_modules/todomvc-common/base.js"></script>
</body>
</html>
